<script lang='ts' setup>
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ProductBox from '../../Common/ProductBox.vue';

const route = useRoute()
const title = computed(() => {
    return (route.query.title || '域名') as string
})

type domainItem = {
    name: string
}

const newDomainList = ref<domainItem[]>([])

const domainList: domainItem[] = [
    {
        name: 'www.baidu.com',
    },
    {
        name: 'www.xxx.com',
    }
]

const newDomainListInput = ref('')

const addDomain = () => {
    if (newDomainListInput.value === '') {
        message.error("域名不能为空")
        return
    }
    newDomainList.value.push({
        name: newDomainListInput.value
    })

    newDomainListInput.value = ''
}

const router = useRouter()

const submit = () => {
    router.push({
        path: '/cart/confirmOrder'
    })
}
</script>
<template>
    <div class="p-5">
        <ProductBox :back="true" :title="title">
            <div class="md:pl-10">
                <div class="p-5">
                    <h3 class="mb-5">
                        已拥有域名：
                    </h3>
                    <div class="md:pl-5">
                        <a-list size="small" bordered :data-source="domainList">
                            <template #renderItem="{ item }">
                                <a-list-item>{{ item.name }}</a-list-item>
                            </template>
                        </a-list>
                    </div>
                </div>
                <div class="p-5">
                    <h3 class="mb-5">
                        新添加域名：
                    </h3>
                    <div class="md:pl-5 pb-5 flex items-center">
                        <a-input v-model:value="newDomainListInput" placeholder="请输入域名" class="max-w-200 mr-2" />
                        <a-button type="primary" @click="addDomain">+</a-button>
                        <span class="ml-5">
                            合计：{{ newDomainList.length * 100 }} 元
                        </span>
                    </div>
                    <div class="md:pl-5">
                        <a-list size="small" bordered :data-source="newDomainList">
                            <template #renderItem="{ item }">
                                <a-list-item>{{ item.name }}</a-list-item>
                            </template>
                        </a-list>
                    </div>
                </div>
            </div>

            <div class="flex justify-center">
                <a-button type="primary" class="w-50" @click="submit">去结算</a-button>
            </div>
        </ProductBox>
    </div>
</template>
<style lang='scss' scoped></style>